<template>
    <el-row :gutter="10">
        <el-col :span="7">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="10">
            <el-container>
                <el-header>
                    <h1 align="center">管理员信息界面</h1>
                </el-header>
                <el-main align="center">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="登录名称">
                            <el-input v-model="tableData.username"></el-input>
                        </el-form-item>
                        <el-form-item label="登录密码">
                            <el-row :gutter="10">
                                <el-col :span="17">
                                    <div class="grid-content bg-purple">
                                        <el-input v-model="tableData.password"></el-input>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-button @click="dialogVisible = true" type="primary" plain size="mini">修改密码
                                        </el-button>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-dialog
                                    title="提示"
                                    :visible.sync="dialogVisible"
                                    width="30%"
                                    :before-close="handleClose">
                                请输入新密码
                                <el-input v-model="updateOne.password"></el-input>
                                请确认新密码
                                <el-input v-model="updateOne.surepassword"></el-input>
                                <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="sure">确 定</el-button>
                      </span>
                            </el-dialog>
                        </el-form-item>

                        <el-form-item label="创建时间">
                            <el-input v-model="tableData.createtime"></el-input>
                        </el-form-item>

                        <el-form-item label="更新时间">
                            <el-input v-model="tableData.updatetime"></el-input>
                        </el-form-item>

                        <el-form-item label="备注">
                            <el-input v-model="tableData.remark"></el-input>
                        </el-form-item>

                    </el-form>

                </el-main>


                <el-footer>
                    <el-row :gutter="10">
                        <el-col :span="2">
                            <div class="grid-content bg-purple">
                            </div>
                        </el-col>
                        <el-col :span="13">
                            <div class="grid-content bg-purple">
                                <el-card class="box-card2">
                                    <div slot="header" class="clearfix">
                                        <span>登录时间信息</span>
                                    </div>

                                    <div v-for="o in tableData2" :key="o" class="text item">
                                        {{'名称 ' + o.username+'更改密码日期 '+o.updatetime }}
                                    </div>
                                </el-card>
                            </div>
                        </el-col>
                        <el-col :span="9">
                            <div class="grid-content bg-purple">
                            </div>
                        </el-col>
                    </el-row>

                </el-footer>

            </el-container>
        </el-col>

        <el-col :span="7">
            <div class="grid-content bg-purple"></div>
        </el-col>
    </el-row>


</template>

<script>

    import {listOne} from "../api/bishe/admin/admin";
    import {list} from "../api/bishe/admin/admin";
    import {remove} from "../api/bishe/admin/admin";
    import {update} from "../api/bishe/admin/admin";
    import {save} from "../api/bishe/admin/admin";

    export default {
        data() {
            return {
                dialogVisible: false,
                username: this.$route.query.name,
                tableData: [],
                tableData2: [],
                updateOne: {
                    surepassword: '',
                    password: ''
                },
                form: {
                    username: '',
                    psaaword: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },
        created() {
            this.selectAll();
        },
        methods: {
            selectAll() {
                if (this.username == null) {
                    this.$message({
                        message: "请登录账户",
                        type: "warning",
                        center: true
                    });
                } else {
                    const payload = {
                        username: this.username
                    }
                    listOne(payload)
                        .then(res => {
                            console.log(res);
                            this.tableData = res.data.items;
                            this.tableData2 = res.data.items2;
                        })
                        .catch(err => {
                            this.$message({
                                message: "请求失败",
                                type: "warning",
                                center: true
                            });
                        });
                }
            },
            onSubmit() {
                console.log('submit!');
            },
            sure() {
                this.dialogVisible = false;
                if (this.updateOne.password === this.updateOne.surepassword) {
                    this.tableData.password = this.updateOne.password;
                    update(this.tableData).then(res => {
                        if (res.code === 20000) {
                            this.$message({
                                message: res.message,
                                type: "success",
                                center: true
                            });
                            this.selectAll();
                        } else {
                            this.dialogVisible = true;
                            this.$message({
                                message: res.message,
                                type: "warning",
                                center: true
                            });
                        }
                    })
                        .catch(err => {
                            this.$message({
                                message: "请求失败",
                                type: "warning",
                                center: true
                            });
                        });
                } else {
                    this.dialogVisible = true;
                    this.$message({
                        message: "两次输入密码不一致",
                        type: "warning",
                        center: true
                    });
                }
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            }
        }
    }
</script>

<style>

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
        margin-left: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card2 {
        width: 480px;
    }
</style>
